<template>
  <div class="bar-echart">
    <BaseEcharts :options="options"></BaseEcharts>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "vuex";
import { defineComponent } from "vue";
import BaseEcharts from "@/base-ui/echarts";
import { IDataType } from "../types";
import * as echarts from "echarts";
export default defineComponent({
  components: {
    BaseEcharts
  },
  // props: {
  //   pieData: IDataType[],
  //  x的值 xLabels
  //  y的值 value data: [120, 132, 101, 134, 90, 230, 210]
  // },
  setup(props) {
    components: {
      BaseEcharts;
    }
    // 后台传
    let dataAxis = ["塑料", "衣物", "家电", "玩具", "课本"];
    let data = [2200, 1820, 1110, 1040, 2000];
    const store = useStore();
    const options = {
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: true,
          color: "#fff"
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        z: 10
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#999"
        }
      },
      dataZoom: [
        {
          type: "inside"
        }
      ],
      series: [
        {
          type: "bar",
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2378f7" },
                { offset: 0.7, color: "#2378f7" },
                { offset: 1, color: "#83bff6" }
              ])
            }
          },
          data: data
        }
      ]
    };
    return {
      options,
      dataAxis
    };
  }
});
</script>
<style scoped lang="less"></style>
